<template>
    <div class="hot-recommended">
        <div class="w-full">
            <recommended-top-bar top-bar-name="热门推荐" :top-bar-tag="arr">
            </recommended-top-bar>
            <div>
                <div class="hot-recommended-cart-item">
                    <div
                        v-for="(item, index) in result.slice(0, 10)"
                        :key="index"
                        :detail="item">
                        <song-shot-information-cart img-size="150" :detail="item" @click="getListDetail(item.id)"></song-shot-information-cart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import RecommendedTopBar from "@/views/recommend/RecommendedTopBar";
import SongShotInformationCart from "@/components/song/SongShotInformationCart";
import {onMounted, ref, watchEffect} from "vue";
import {getPersonalized, getRecommend} from "@/network/song/song-list";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {useNotification} from "naive-ui";

export default {
    name: "Recommended",
    setup() {
        const store = useStore();
        const router = useRouter();
        const arr = ['流行', '电子', '摇滚', '民谣'];
        const result = ref([]);
        const init = () => {
            // 如果已经登录,获取每日推荐歌单
            if (store.state.user.isLogin === true) {
                getRecommend().then(res => {
                    result.value = [];
                    result.value = res.data.recommend;
                })
            } else {
                // 获取热门歌单
                getPersonalized().then(res => {
                    result.value = [];
                    result.value = res.data.result;
                })
            }
        }
        watchEffect(() => {
            const loginFlag = store.state.user.isLogin;
            init();
        })
        onMounted(() => {
            init();
        })
        // 根据ＩＤ获取歌单详情
        const getListDetail = (id) => {
            router.push({path: '/playlist', query: {id}});
        }
        return {
            arr,
            result,
            getListDetail,
        }
    },
    components: {
        RecommendedTopBar,
        SongShotInformationCart
    }
}
</script>

<style lang="scss" scoped>
.hot-recommended {
    @apply flex;
    .hot-recommended-cart-item {
        @apply m-4  grid grid-cols-5 gap-12;
    }
}
</style>